<template>
  <div class="index">
    <nav>
      <ul>
        <li v-for="item in this.$router.options.routes[0].children" v-bind:key="item.name">
          <router-link :to="item.path" active-class="on">{{ item.text }}</router-link>
        </li>
      </ul>
    </nav>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'index-page',
  props: {},
  data: function () {
    return {
      message: 'index',
    }
  },
  created() {
    console.log('组件创建')
  },
  beforeDestroy() {
    console.log(this.$router.options.routes[0].children)
    console.log('组件销毁')
  },
  methods: {
    goToPath(item) {
      // this.$router.push(item.path)
      console.log(item)
      this.$router.push(item.path)
    },
  }
}
</script>


<style scoped>
.index{

  nav{
    display: flex;
    background-color:#c20c0c ;
    justify-content: center;
    ul{
      display: flex;
      background-color: #c20c0c;
      width: 1100px;
      padding-left: 170px;
      box-sizing: border-box;
      li{
        background-color: #c20c0c;
        border-radius: 15px;
        font-size: 12px;
        padding:2px 13px;
        margin: 8px 20px;
        cursor: pointer;
        color: white;
        a{
          border-radius: 5555px;
          padding: 3px 10px;
          &.router-link-exact-active,&:hover {
            background-color: rgba(0,0,0,.3);
          }
        }
      }
    }

  }
}



</style>

